<template>
  <div>
    <div style='width: 150px;border: 1px solid red'>
      <el-tree
        ref='tree'
        :data='treeData'
        :props='defaultProps'
        :expand-on-click-node='false'
        default-expand-all
        @node-click='handleNodeClick'
      >
        <div slot-scope='{ node, data, el }' class='tree-node'>
          <el-tooltip
            :content='node.label'
            :disabled='isShowTooltip'
            :open-delay='300'
            placement='top'
            effect='dark'
          >
            <span class='over-ellipsis' @mouseover='mouseOver($event)'>
              {{ node.label }}
            </span>
          </el-tooltip>
          <!--          <span class="top-right">-->
          <!--            <i-->
          <!--              class="el-icon-circle-plus"-->
          <!--              @click.stop.prevent="() => addFun(data)"-->
          <!--            />-->
          <!--            <i-->
          <!--              class="el-icon-delete"-->
          <!--              @click.stop.prevent="() => deleteFun(data)"-->
          <!--            />-->
          <!--          </span>-->
        </div>
      </el-tree>


    </div>

    <el-form :model='ruleForm' :rules='rules' ref='ruleForm' style='margin-top:20px'>
      <el-form-item label='终端号' prop='id'>
        <el-input v-model='ruleForm.id' style='width : 220px' clearable></el-input>
      </el-form-item>

    </el-form>


  </div>
</template>
<script>
export default {
  data() {
    var checkNumber = (rule, value, callback) => {
      if (!value || value.trim() === '') {
        return callback(new Error('请输入终端号'))
      }
      var reg = /^\d{1,10}$/
      if (!reg.test(value)) {
        return callback(new Error('请输入1~10位整数'))
      } else {
        callback()
      }
    }
    return {
      isShowTooltip: false,

      ruleForm: { id: undefined },
      rules: {
        id: [{
          required: true, validator: checkNumber, trigger: 'blur'
        }]
      },
      treeData: [
        {
          label: '一级 JOJO奇妙冒险',
          children: [
            {
              label: '二级 JOJO黄金之风',
              children: [
                {
                  label: '三级 JOJO之茸茸'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 3',
          children: [
            {
              label: '二级 3-1',
              children: [
                {
                  label: '三级 3-1-1'
                }
              ]
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    // 超出显示
    mouseOver(event) {
      console.log(event)
      this.isShowTooltip =
        event.currentTarget.scrollWidth <= event.currentTarget.clientWidth
      console.log('222')
    },
    handleNodeClick(data) {
      console.log(data)
    },
    addFun(data) {
      console.log(data)
    },
    deleteFun(data) {
      console.log(data)
    }
  }
}
</script>
<style scoped>
.tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  /* padding-right: 8px; */
}

.over-ellipsis {
  display: block;
  width: calc(100% - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}

.top-right {
  display: block;
  min-width: 50px;
  width: 50px;
  text-align: right;
  position: absolute;
  right: 0;
}
</style>

